Opérateur de coalescence des nuls en JavaScript : Attribution de valeurs par défaut vs. gestion des valeurs 'falsy'

Les développeurs JavaScript ont souvent besoin d'assigner des valeurs par défaut aux variables lorsque la valeur originale est manquante ou invalide. Traditionnellement, l'opérateur OU logique (||) était utilisé à cette fin. Cependant, l'opérateur de coalescence des nuls (??), introduit dans ECMAScript 2020, offre une solution plus précise et fiable, notamment lorsqu'il s'agit de valeurs 'falsy'. Ce guide complet explore les nuances de la coalescence des nuls, la compare à l'opérateur OU logique et présente ses applications dans divers scénarios.

Comprendre la coalescence des nuls (??)

L'opérateur de coalescence des nuls (??) renvoie son opérande de droite lorsque son opérande de gauche est null ou undefined. Sinon, il renvoie son opérande de gauche. En termes plus simples, il fournit une valeur par défaut uniquement lorsque la variable est explicitement null ou undefined.

Syntaxe :

leftOperand ?? rightOperand

Exemple :

            const name = null ?? "Guest";
console.log(name); // Sortie : "Guest"

const age = undefined ?? 25;
console.log(age); // Sortie : 25

const score = 0 ?? 100;
console.log(score); // Sortie : 0

            

              
                Copy
              
            
          

Différencier la coalescence des nuls (??) de l'opérateur OU logique (||)

L'opérateur OU logique (||) offre également un moyen d'assigner des valeurs par défaut. Cependant, il traite toute valeur falsy (false, 0, '', NaN, null, undefined) comme équivalente à null ou undefined, ce qui peut entraîner un comportement inattendu.

Exemple avec l'opérateur OU logique :

            const quantity = 0 || 10;
console.log(quantity); // Sortie : 10 (inattendu, car 0 est 'falsy')

const message = '' || "No message";
console.log(message); // Sortie : "No message" (inattendu, car '' est 'falsy')

            

              
                Copy
              
            
          

Exemple avec la coalescence des nuls :

            const quantity = 0 ?? 10;
console.log(quantity); // Sortie : 0 (correct, car 0 n'est ni null ni undefined)

const message = '' ?? "No message";
console.log(message); // Sortie : "" (correct, car '' n'est ni null ni undefined)

            

              
                Copy
              
            
          

Comme vous pouvez le voir, l'opérateur de coalescence des nuls ne se déclenche que lorsque l'opérande de gauche est explicitement null ou undefined, préservant ainsi les valeurs 'falsy' comme 0 et ''.

Cas d'utilisation de la coalescence des nuls

La coalescence des nuls est particulièrement utile dans les scénarios où vous devez faire la distinction entre une valeur manquante (null ou undefined) et une valeur 'falsy' valide.

1. Gérer les options de configuration

Lorsque vous traitez des options de configuration, vous pourriez vouloir fournir des valeurs par défaut pour les paramètres qui n'ont pas été explicitement définis. L'utilisation de ?? garantit que les valeurs 'falsy' valides (e.g., 0 pour une valeur de timeout) ne sont pas accidentellement remplacées par la valeur par défaut.

            const config = {
  timeout: 0,
  maxRetries: null,
  apiEndpoint: undefined
};

const timeout = config.timeout ?? 5000; // Utilise 0 si timeout est défini explicitement, sinon 5000 par défaut
const maxRetries = config.maxRetries ?? 3; // Utilise 3 si maxRetries est null ou undefined
const apiEndpoint = config.apiEndpoint ?? "https://example.com/api"; // Utilise le point d'accès par défaut si apiEndpoint est null ou undefined

console.log(`Timeout: ${timeout}, Max Retries: ${maxRetries}, API Endpoint: ${apiEndpoint}`);
// Sortie : Timeout: 0, Max Retries: 3, API Endpoint: https://example.com/api

            

              
                Copy
              
            
          

2. Travailler avec les réponses d'API

Les réponses d'API contiennent souvent des champs qui peuvent être manquants ou avoir des valeurs 'falsy' explicitement définies. La coalescence des nuls vous permet de gérer ces scénarios avec élégance, en vous assurant que vous ne fournissez des valeurs par défaut que lorsqu'un champ est réellement manquant.

Exemple : Une réponse d'API simplifiée représentant un utilisateur :

            const user = {
  name: "Alice",
  age: 30,
  countryCode: null,
  acceptedTerms: false,
  profilePictureURL: undefined
};

const displayName = user.name ?? "Unknown User";
const userAge = user.age ?? "Age not available";
const country = user.countryCode ?? "US"; // Par défaut 'US' si null/undefined
const hasAcceptedTerms = user.acceptedTerms ?? true; // Par défaut 'true' si null/undefined
const profilePic = user.profilePictureURL ?? "/default-profile.png"; // Image par défaut si null/undefined

console.log(`Name: ${displayName}`); // Sortie : Name: Alice
console.log(`Age: ${userAge}`); // Sortie : Age: 30
console.log(`Country: ${country}`); // Sortie : Country: US
console.log(`Accepted Terms: ${hasAcceptedTerms}`); // Sortie : Accepted Terms: false
console.log(`Profile Picture: ${profilePic}`); // Sortie : Profile Picture: /default-profile.png

            

              
                Copy
              
            
          

Dans cet exemple, nous utilisons 'US' par défaut uniquement si `countryCode` est explicitement null ou undefined. Si l'API avait retourné `countryCode: ""`, alors la chaîne vide aurait été préservée, reflétant le code pays réel (bien que potentiellement manquant) de l'utilisateur.

3. Fournir des valeurs de repli dans les fonctions

Lorsque vous écrivez des fonctions qui acceptent des paramètres optionnels, la coalescence des nuls peut être utilisée pour fournir des valeurs par défaut pour les arguments manquants.

            function greet(name, greeting) {
  const displayName = name ?? "Guest";
  const salutation = greeting ?? "Hello";
  return `${salutation}, ${displayName}!`;
}

console.log(greet("Bob", "Good morning")); // Sortie : Good morning, Bob!
console.log(greet(null, undefined)); // Sortie : Hello, Guest!
console.log(greet("", "")); // Sortie : , !
console.log(greet("", null)); // Sortie : Hello, !

            

              
                Copy
              
            
          

Cette approche garantit que la fonction a toujours une valeur avec laquelle travailler, même si l'appelant ne fournit pas tous les arguments.

4. Internationalisation et localisation (i18n/l10n)

Lorsque vous travaillez avec des applications internationalisées, vous avez souvent différentes traductions pour diverses chaînes de caractères. La coalescence des nuls peut être utilisée pour fournir une traduction par défaut si une traduction spécifique est manquante pour une langue particulière.

            const translations = {
  en: {
    greeting: "Hello",
    farewell: "Goodbye"
  },
  fr: {
    greeting: "Bonjour"
  }
};

function translate(key, language) {
  return translations[language]?.[key] ?? translations.en[key] ?? `Translation missing for key: ${key}`;
}

console.log(translate("greeting", "fr")); // Sortie : Bonjour
console.log(translate("farewell", "fr")); // Sortie : Translation missing for key: farewell
console.log(translate("greeting", "de")); // Sortie : Hello (se replie sur l'anglais)

            

              
                Copy
              
            
          

Dans cet exemple, nous essayons d'abord de trouver la traduction pour la langue et la clé spécifiées. Si elle est manquante, nous nous rabattons sur la traduction anglaise. Si même la traduction anglaise est manquante, nous retournons un message indiquant que la traduction est manquante.

5. Gérer les saisies utilisateur dans les formulaires

Lors du traitement des saisies utilisateur provenant de formulaires, vous pourriez rencontrer des cas où certains champs sont laissés vides ou contiennent des chaînes vides. L'utilisation de l'opérateur de coalescence des nuls conjointement avec l'opérateur de chaînage optionnel (?.) peut être très efficace pour traiter des saisies utilisateur profondément imbriquées.

            const formData = {
  user: {
    name: "",
    address: {
      city: null,
      country: undefined
    }
  }
};

const userName = formData.user.name || "No Name Provided";
const safeUserName = formData?.user?.name ?? "No Name Provided";
const userCity = formData?.user?.address?.city ?? "City Unknown";
const userCountry = formData?.user?.address?.country ?? "Country Unknown";

console.log(userName); // No Name Provided (car la chaîne vide est 'falsy')
console.log(safeUserName); // "" (car safeUserName vérifie explicitement null ou undefined)
console.log(userCity); // City Unknown
console.log(userCountry); // Country Unknown

            

              
                Copy
              
            
          

Priorité des opérateurs et combinaison avec d'autres opérateurs

L'opérateur de coalescence des nuls a une priorité d'opérateur relativement faible. Cela signifie que vous devrez souvent utiliser des parenthèses pour vous assurer qu'il est évalué correctement, en particulier lorsqu'il est combiné avec d'autres opérateurs comme le ET logique (&&) ou le OU logique (||).

Note importante : Vous ne pouvez pas combiner directement ?? avec && ou || sans utiliser de parenthèses. C'est pour éviter toute ambiguïté dans l'ordre des opérations.

Utilisation correcte :

            const value = (someValue ?? 10) && true;
console.log(value); // Sortie : true si someValue n'est pas null ou undefined, sinon false

const result = (null ?? 5) + 10; // Sortie : 15

            

              
                Copy
              
            
          

Utilisation incorrecte (provoquera une SyntaxError) :

            // const value = someValue ?? 10 && true; // SyntaxError: Unexpected token '&&'

// const result = null ?? 5 + 10; // SyntaxError: Unexpected number

            

              
                Copy
              
            
          

Compatibilité des navigateurs

L'opérateur de coalescence des nuls (??) est un ajout relativement récent à JavaScript. Assurez-vous que vos navigateurs cibles le prennent en charge. La plupart des navigateurs modernes le supportent, mais les navigateurs plus anciens peuvent nécessiter une transpilation à l'aide d'outils comme Babel.

Pour vérifier la compatibilité des navigateurs, vous pouvez vous référer à des ressources comme MDN Web Docs.

Meilleures pratiques pour l'utilisation de la coalescence des nuls

• Utilisez-le lorsque vous devez faire la distinction entre les valeurs manquantes (null ou undefined) et les valeurs 'falsy' valides.
• Utilisez toujours des parenthèses lorsque vous combinez ?? avec && ou || pour éviter les erreurs de syntaxe et garantir une évaluation correcte.
• Soyez attentif à la compatibilité des navigateurs et envisagez la transpilation si nécessaire.
• Documentez clairement votre utilisation de ?? pour améliorer la lisibilité du code.
• Testez votre code de manière approfondie pour vous assurer que les valeurs par défaut sont correctement attribuées dans tous les scénarios.

Conclusion

L'opérateur de coalescence des nuls (??) est un ajout puissant et précieux au langage JavaScript. Il offre un moyen plus précis et fiable d'assigner des valeurs par défaut par rapport à l'opérateur OU logique traditionnel (||), en particulier lorsqu'il s'agit de valeurs 'falsy'. En comprenant ses nuances et les meilleures pratiques, vous pouvez écrire du code JavaScript plus propre, plus robuste et plus facile à maintenir. Envisagez d'adopter ?? dans vos projets pour améliorer la clarté et la précision de vos attributions de valeurs par défaut. N'oubliez pas de tester votre code de manière approfondie sur différents navigateurs et d'envisager la transpilation pour les environnements plus anciens.

Ce guide a fourni un aperçu complet. Expérimentez avec ?? dans différents contextes pour bien saisir ses capacités et ses limites, et affinez continuellement votre compréhension par une application pratique.